<template>
  <div class="Diary">
    <Nav></Nav>

    <div class="diary-main">
      <div class="nav">
        匹配大厅
      </div>
      <div class="container">
        <div>
<!--          <canvas id="chess" width="450px" height="450px"></canvas>-->
          <div id="screen"></div>
          <el-button type="primary" round @click=""
                     v-text="this.beginMatch===false?`开始匹配`:`结束匹配`"
                     :disabled="this.click"
                      @click="this.websockSendMessage"></el-button>
        </div>
      </div>
    </div>
  </div>

</template>
<script defer=true>
import Nav from "../../components/Nav";
import Leader from "../../components/Leader";
import request from "../../api";

import "../../assets/js/phaser.min.js";
// import initGame from "../../assets/js/script.js";
// import  from "@/assets/js/dateformat";
const gamestatestx = require("../../assets/js/catch-the-cat.js");



export default {
  name: "goBangHall",
  components: { Nav, Leader },
  data() {
    return {
      beginMatch:false,
      userId: "",
      websock: {},
      matchRequestVO:{
        message:""
      },
      click: false,
      matchResponseVO:{
        ok:{},
        reason:"",
        message:""
      }
    };
  },
  watch: {

  },
  methods: {
    initDraw() {
      console.log("initDraw");
    },


    socketInit: function () {
      console.log("socketInit");
      var user=  this.$store.state.user;
      if (JSON.stringify(user) !== "{}" && JSON.stringify(user)!==undefined) {
      //已经登陆了
        this.userId =user.id;
      }else{
        this.click=true;
        this.$message.error("在线五子棋请登录~~");
        this.$router.push("/game");
        return;
      }
      console.log(this.userId);
      const hh = window.location.href
      let url;
      if (hh.indexOf('https') > -1) {
        url = "wss://"+this.$config.websocketurl+"/findMatch?userId="+this.userId;
      } else {
        url = "ws://"+this.$config.websocketurl+"/findMatch?userId="+this.userId;
      }
      console.log(url);
      this.websock = new WebSocket(url);
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
    websockSendMessage(e){
      //测试
      this.beginMatch=!this.beginMatch;
      if(this.beginMatch===true){
        //开始匹配
        this.matchRequestVO.message="startMatch";
        this.websock.send(JSON.stringify(this.matchRequestVO));
      }else{
        //停止匹配
        this.matchRequestVO.message="stopMatch";
        this.websock.send(JSON.stringify(this.matchRequestVO));
      }
    },
    websocketonopen: function () {
      console.log("WebSocket连接成功");
    },
    websocketonerror: function (e) {
      console.log("WebSocket连接发生错误");
    },
    //接受服务端返回数据
    websocketonmessage: function (e) {
      let parse = JSON.parse(e.data);
      console.log(parse);
      if(parse.ok===false){
        this.$message.error("出错了，原因："+parse.message);
      }
      if(parse.message==="MatchSuccess"){
        //匹配成功
        this.$message.success("匹配成功");
        this.websocketclose();
        //跳到在线五子棋路由
        this.$router.push('/play/GobangOnline')
      }
      //判断有没有获胜
    },
    websocketclose: function (e) {
      this.websock.close();
    }
  },
  mounted() {
    this.initDraw();
  },
  created() {
    this.socketInit();
  },
  destroyed: function () {

    this.websock.close();
  }

};
</script>

<style scoped lang="less">

.Diary {
  box-sizing: border-box;
  max-width: 1360px;
  width: 100%;
  padding: 80px 50px;
  margin: 0 auto;
  .diary-main {
    box-sizing: border-box;
    width: 100%;
    padding: 30px 8% 30px 20%;
    //background-color: rgba(255, 255, 21, 1);
    border-radius: 15px;
    .el-timeline {
      /deep/ .el-timeline-item__timestamp {
        position: absolute;
        top: -8px;
        left: -134px;
        font-size: 20px;
        font-weight: bolder;
        color: #6bc30d;
      }
      .el-timeline-item {
        .el-card {
          pre {
            font-size: 14px;
            line-height: 30px;
          }
        }
      }
    }
  }
}
#screen {
  font-size: 22px;
  text-align: center;
  background-color: rgba(255,255,255,0);
  color: yellow;
  margin-bottom: 20px;
}
</style>